HTML、CSS 與 JavaScript 解析

1. HTML 模板
2. JavaScript 邏輯
   • 遊戲狀態紀錄資料
   • handleScore 程式碼解釋
3. Style 邏輯
4. GPT 優化建議

HTML 模板

<div class="mx-1 h-8 flex justify-center items-center relative">
  <div class="mr-2 text-sm font-Libre">
    {{ gameStatus.currentStep }} / {{ gameStatus.totalStep }} 題
  </div>
  <ul class="flex items-center"> <!-- 主要進度與答題正確性顯示區塊  -->
    <li
      v-for="(isCorrect, index) in gameStatus.stepCorrect"
      :key="index"
      class="w-6 h-2.5 mr-[2px] border-2 rounded-full"
      :class="[
        isCorrect === null ? 'bg-[#e3e0d5] border-[#e3e0d5]' : isCorrect ? 'bg-[#5cb887] border-[#5cb887]' : 'bg-[#d25353] border-[#d25353]',
        gameStatus.currentStep === index + 1 ? 'border-[#5d72c9]' : '',
      ]"
    />
  </ul>
  <div
    data-test="score"
    class="ml-2 text-sm font-Libre"
  >
    {{ gameStatus.score }} 分
  </div>
  <RuleDeclaration class="z-50 ml-2" />
</div>

JavaScript 邏輯

遊戲狀態紀錄資料

const initialGameState = {
  currentStep: 1,
  totalStep: 8,
  stepCorrect: [null, null, null, null, null, null, null, null],
  score: 0,
  scoreRecord: [0, 0, 0, 0, 0, 0, 0, 0],
};
const gameStatus = reactive(JSON.parse(JSON.stringify(initialGameState)));

說明：stepCorrect 主要是用來顯示這題是否答對，而每一題都有不同的分數，不同分數則記錄在 scoreRecord 裡，總分則累積在 score 裡。

handleScore 程式碼解釋

handleScore 主要功能

1. 記錄此次得分
2. 紀錄分數的累加總分為何
3. 如果做錯進一步的重新排序已作答卡片。

const handleScore = () => {
    let isCorrect = false;
    let insertPostion = overOutlineCount.value;
    if (insertPostion === 0) {
        isCorrect = timelineEvents.value[insertPostion].year < timelineEvents.value[insertPostion + 1].year;
    } else if (insertPostion === timelineEvents.value.length - 1) {
        isCorrect = timelineEvents.value[insertPostion].year > timelineEvents.value[insertPostion - 1].year;
    } else {
        isCorrect = timelineEvents.value[insertPostion].year >= timelineEvents.value[insertPostion - 1].year && timelineEvents.value[insertPostion].year <= timelineEvents.value[insertPostion + 1].year;
    }
    gameStatus.stepCorrect[gameStatus.currentStep - 1] = isCorrect;
    if (isCorrect) {
        gameStatus.score += timelineEvents.value[insertPostion].point;
    }
    //標記 timelineEvents 是否回答正確
    timelineEvents.value[insertPostion].isCorrect = isCorrect;
    return isCorrect;
};

變數和資料結構說明：

• isCorrect: 用於存儲當前步驟是否正確。
• insertPostion: 代表當前要插入的位置。
• timelineEvents: 一個包含事件和年份的陣列。
• gameStatus.stepCorrect: 用於存儲遊戲作答的是否正確。
• gameStatus.score：紀錄遊戲的總分

邏輯流程說明：

1. 判斷insertPostion是在陣列的哪個位置。
2. 根據位置來判斷isCorrect。
3. 更新gameStatus物件的stepCorrect和score。
4. 更新timelineEvents的isCorrect屬性。

Style 邏輯

進度條上顯示是否正確。灰：未作答、綠：正確、紅：錯誤。

isCorrect === null ? 'bg-[#e3e0d5] border-[#e3e0d5]' : isCorrect ? 'bg-[#5cb887] border-[#5cb887]' : 'bg-[#d25353] border-[#d25353]',

GPT 優化建議

1. 程式碼重複: 可以看到有多處重複的程式碼，例如timelineEvents.value[insertPostion].year。建議使用變數來存儲這些值。
2. 可讀性: 考慮添加更多的註解和使用更具描述性的變數名稱。
3. 錯誤處理: 目前的程式碼沒有錯誤處理機制。如果timelineEvents或gameStatus是null或undefined，程式會崩潰。
4. 函數解耦: 考慮將一些邏輯拆分到其他函數中，以提高可測試性和可維護性。

const getYearAtPosition = (events, position) => events.value[position].year;
const handleScore = () => {
    let isCorrect = false;
    const position = overOutlineCount.value;
    const currentYear = getYearAtPosition(timelineEvents, position);
    const prevYear = getYearAtPosition(timelineEvents, position - 1);
    const nextYear = getYearAtPosition(timelineEvents, position + 1);
    if (position === 0) {
        isCorrect = currentYear < nextYear;
    } else if (position === timelineEvents.value.length - 1) {
        isCorrect = currentYear > prevYear;
    } else {
        isCorrect = currentYear > prevYear && currentYear < nextYear;
    }
    gameStatus.stepCorrect[gameStatus.currentStep - 1] = isCorrect;
    if (isCorrect) {
        gameStatus.score += timelineEvents.value[position].point;
    }
    timelineEvents.value[position].isCorrect = isCorrect;
    return isCorrect;
};